export default {
  name: 'Users',
  data () {
    return {
      users: [],
      info: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      addUserDialog: false,
      addUserInfo: {},
      addUserRules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'change' },
          { min: 3, message: '最少填写三个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' },
          { min: 3, message: '最少填写三个字符', trigger: 'change' }
        ]
      },
      editUserDialog: false,
      editUserInfo: {
        email: '',
        mobile: '',
        id: 0
      },
      rightsDialog: false,
      rightsInfo: {
        id: 0,
        rid: ''
      },
      rightsList: []
    }
  },
  created () {
    this.getUsersList()
  },
  methods: {
    // 获取用户列表
    async getUsersList () {
      const { data } = await this.$get('users', { params: this.info })
      // console.log(data)
      this.total = data.total
      this.users = data.users
    },
    // 关闭对话框
    closeUserDialogHandler () {
      this.$refs.addUser.resetFields()
      this.addUserInfo = {}
    },
    addUserHandler () {
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则填写表单'
          })
          return
        }
        const { meta } = await this.$post('users', this.addUserInfo)
        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }
        this.$message({
          type: 'success',
          message: '添加'
        })
        this.addUserDialog = false
        this.getUsersList()
      })
    },
    async changeUserStateHandler (val) {
      console.log('渲染表格当前行的数据')
      console.log(val)
      const { meta } = await this.$put(`users/${val.id}/state/${val.msg_state}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户状态成功'
        })
      }
    },
    async deleteUserHandler (id) {
      console.log('我要删除用户了')
      const { meta } = await this.$delete(`users/${id}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
      }
      this.getUsersList()
    },
    async showEditUserDialogHandler (id) {
      console.log(id)
      const { data } = await this.$get(`users/${id}`)
      console.log(data)
      this.editUserInfo.id = data.id
      this.editUserInfo.username = data.username
      this.editUserInfo.email = data.email
      this.editUserInfo.mobile = data.mobile
      this.editUserDialog = true
    },
    async editUserHandler () {
      const { meta } = await this.$put('users/' + this.editUserInfo.id, this.editUserInfo)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
        this.editUserDialog = false
      }
      this.getUsersList()
    },
    async showRightsHandler (val) {
      console.log(val)
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id
      const { data } = await this.$get('roles')
      this.rightsList = data
      this.rightsDialog = true
    },
    async editRightsHandler () {
      const { meta } = await this.$put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rid })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户身份成功'
        })
        this.getUsersList()
        this.rightsDialog = false
      }
    }
    // showAddUsers () {
    //   this.addUserDialog = true
    // }
    // // 分页器改变一页多少条数据
    // sizeChangeHandler (val) {
    //   // console.log(val)
    //   this.info.pagesize = val
    //   // this.getUsersList()
    // },
    // // 分页器改变当前页
    // currentChangeHandler (val) {
    //   this.info.pagenum = val
    //   // this.getUsersList()
    // },
    // // 模糊搜索
    // searchHandler () {
    //   this.info.pagesize = 1
    //   // this.getUsersList()
    // }
  },
  filters: {
    format (val) {
      const t = new Date(val * 1000)
      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()
      const hours = t.getHours()
      const minutes = t.getMinutes()
      const seconds = t.getSeconds()

      return `${year} 年 ${month} 月 ${date} 日 ${hours} 时 ${minutes} 分 ${seconds} 秒`
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  }
}
